<!-- 门诊总人数/占比 -->
<template>
    <div class="total">
        <div class="content">
            <div :span="4" v-for="(item, index) in total" :key="index" class="card">
                <div class="number">{{ item.number + '人' }}</div>
                <div>{{ item.name }}</div>
            </div>
        </div>

        <div class="content">
            <div :span="4" v-for="(item, index) in total" :key="index" class="card">
                <div class="number">{{ item.percent }}</div>
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getTotal } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    name: "total",
    data() {
        return {
            total: [
                { name: "人民医院", number: "", percent: "" },
                { name: "二院", number: "", percent: "" },
                { name: "中医院", number: "", percent: "" },
                { name: "妇幼保健", number: "", percent: "" },
                { name: "乡镇卫生院", number: "", percent: "" },
            ],
        };
    },
    mounted() {
        this.sortData()
    },
    methods: {
        //整理数据
        sortData() {
            let totalNumber = 0;
            const data = new Array(5).fill(0).map(() => Mock.Random.integer(2000, 7000));
            data.forEach((value, index) => {

                totalNumber += parseInt(value);
                this.total[index].number = parseInt(value);
            });
            this.total.forEach((item) => {
                item.percent = (item.number / totalNumber * 100).toFixed(2) + "%";
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.total {
    height: 100%;
    position: relative;
    padding-top: 30px;

    .content {
        background: rgb(51, 102, 255, 0.1);
        border-radius: 10px;
        padding-top: 20px;
        margin-bottom: 15px;
        height: 90px;
    }

    .card {
        height: 50px;
        color: #fff;
        line-height: 20px;
        display: inline-block;
        width: 20%;
        text-align: center;
        font-size: 14px;
        line-height: 26px;
        border-right: 1px solid rgb(0, 153, 255, 0.4);

        .number {
            font-size: 20px;
            font-weight: 600;
        }
    }

    .card:last-child {
        border-right: none;
    }
}
</style>